<!DOCTYPE html>
<html>
  <head>
    <title>找回密码</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="../css/supersized.css">
<link href="../jsp/css/login.css" rel="stylesheet">
<!-- 插件样式 -->
<link rel="stylesheet" type="text/css" href="./css/sm.css">
<link rel="stylesheet" type="text/css" href="./css/sm-extend.css">
<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="../js/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<!-- 插件js -->
<script src="./js/zepto.js"></script>
<script src="./js/sm.js" ></script>
<script src="./js/sm-extend.js" ></script>
  </head>
  
  <body style="background: #fff;">
  <div class="container">
	<div class="main_content"   style="text-align : -webkit-center">
			<span class="zhuce_text">找回密码</span>
			<ul id="send">
				<li><input id="phone" name="phone" placeholder="请输入手机号码" class="input" />
				<li>
					<input id="captcha" name="captcha" placeholder="请输入验证码" class="input" style="width:60%; float: left;" />
					<button id="getCaptchaBtn" style="width: 35%;height: 43px;border-radius:8px; list-style: none;border:none;background: #0894ec;color:#fff;font-size: 12px;float: right;">获取动态码</button></li>
				</li>
				<li ><button id="checkCaptchaBtn"  style="margin-top: 30px;width: 100%;height: 40px;background: #0894ec;box-shadow: none;border:none;border-radius:8px;color: #fff;">下一步</button></li>
			</ul>
			
			<ul id="setpassword" style="display: none">
				<li><input type="password" id="password" name="password" placeholder="请输入新密码" class="input" /></li>
				<li><input type="password" id="password2" name="password2" placeholder="请再次输入新密码" class="input" /></li>
				<li><button id="registBtn" style="margin-top: 30px;width: 200px;height: 40px;background: #0894ec;box-shadow: none;border:none;border-radius:8px;">确定</button></li>
			</ul>
	</div>
</div>
<div class="bottom_css" style="text-align : -webkit-center;	width: 100%;">
	<span>已有账号? &nbsp;&nbsp;&nbsp;<a href="../jsp/login.html">&lt;返回登录 </a></span>
</div>

<script src="../js/loginjs/scripts.js"></script>
<script type="text/javascript">
window.$$=window.Zepto = Zepto;
/** 点击获取验证码按钮  */
$("#getCaptchaBtn").on("click",function(){
	var phone =  $("#phone").val().trim();
	if( !checkPhone(phone) ){
		$$.toast("请输入手机号码");
		return;
	}
	
	//验证是否存在此账号
	$.ajax({
		type : "POST",
		dataType : 'json',
		url : "../user/checkPhone.do",
		data : {
			"phone": phone
		},
		success : function(data) {
			console.log(data)
			if( data.resultCode=="1" ){
				// 禁用按钮并倒计时30s
				$("#getCaptchaBtn").attr("disabled",true);
				countdown(60);	
				//发送验证码
				$.ajax({
					type : "POST",
					dataType : 'json',
					url : "../sms/sendCaptcha.do",
					data : {
						"phone": phone,
						"type":0
					},
					success : function(data) {
						console.log(data)
						if( data.resultCode=="0" ){
							
						}else{
							$$.toast(data.msg||"获取验证码失败" );
						}
					}
				});
				
				
			}else{
				$$.toast("不存在该账号" );
			}
		}
	});
	
});

// 获取验证码后  倒计时, 禁止重复点击获取按钮
function countdown(count) {
    var a = setInterval(function() {
        count = count-1;
        $("#getCaptchaBtn").text("获取验证码（"+ count +"）");
        clearInterval(a);
        if(count>0){
            countdown(count);
        }else{
        	$("#getCaptchaBtn").attr("disabled",false).text("获取验证码");
        }
    }, 1000);
}



/** 点击获下一步时判断验证码正确性  */
$("#checkCaptchaBtn").on("click",function(){
	var phone = $("#phone").val().trim();
		captcha = $("#captcha").val().trim();
	if( !phone ){
		$$.toast("请输入手机号码" );
		return ;
	}
	if( !captcha ){
		$$.toast("请输入验证码" );
		return;
	}
	
	$.ajax({
		type : "POST",
		dataType : 'json',
		url : "../sms/isPhoneCaptcha.do",
		data : {
			"phone": phone,
			"captcha": captcha
		},
		success : function(data) {
			console.log(data)
			if( data.resultCode=="0"){
				$("#setpassword").show();
				$("#send").hide();
			}else{
				$$.toast("验证码错误" );
			}
		}
	});
});


$("#registBtn").on("click",function(){
	var phone = $("#phone").val().trim(),
		captcha = $("#captcha").val().trim(),
		password = $("#password").val(),
		password2 = $("#password2").val();
	if( password != password2 ){
		$$.toast("两次输入的密码不一致" );
		return ;
	}
	$.ajax({
		type : "POST",
		dataType : 'json',
		url : "../user/findPassword.do",
		data : {
			"phone": phone,
			"password": password,
			"captcha": captcha
		},
		success : function(data) {
			console.log(data)
			if( data.resultCode=="0"){
				$$.toast("找回密码成功" );
				window.location.href =  "../jsp/login.html";					
			}else{
				$$.toast("找回密码失败,请联系客服" );
			}
		}
	});
});

</script>


  </body>
</html>
